import { AspectRatioDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.AspectRatio);

## Usage

`AspectRatio` allows maintaining a consistent width/height ratio.
It can be used to display images, maps, videos and other media.

<Demo data={AspectRatioDemos.image} />

## Map embed

<Demo data={AspectRatioDemos.map} />

## Video embed

<Demo data={AspectRatioDemos.video} />

## Inside flex container

By default, `AspectRatio` does not have fixed width and height, it will take as much space as possible
in a regular container. To make it work inside flex container, you need to set `width` or `flex` property.

<Demo data={AspectRatioDemos.flex} />
